<template>
  <div class="app-container">

    <section class="form-bar">
      <el-form v-loading="loading" class="detailForm" :model="form" label-width="100px">
        <h3>封面图片</h3>
        <section v-show="role == '超级管理员' || role == '管理员' " class="top-btn-bar" style="margin: 20px">
          <el-button v-show="role == '超级管理员' || role == '管理员' " type="primary" @click="handleUpdateCover">更新</el-button>
        </section>
        <img :src="form.cover" alt="" style="width: 200px;padding: 0 20px;">

        <H3>主要信息</H3>
        <section v-show="role == '超级管理员' || role == '管理员' " class="top-btn-bar" style="margin: 20px">
          <el-button v-if="!inEdit" type="success" icon="el-icon-plus" @click="handleEdit">编辑</el-button>
          <el-button v-if="inEdit" type="primary" @click="onSubmit">保存</el-button>
          <el-button v-if="inEdit" @click="inEdit = false;loading = false">取消</el-button>
        </section>
        <el-form-item label="期刊标题">
          <el-input v-if="inEdit" v-model="edit.name" />
          <span v-else> {{ form.name }} </span>
        </el-form-item>
        <el-form-item label="上架情况">
          <el-select v-if="inEdit" v-model="edit.suspend_receiving">
            <el-option :key="0" label="下架" :value="0" />
            <el-option :key="1" label="上架" :value="1" />
          </el-select>
          <span v-else>  {{ form.suspend_receiving == 1 ? '上架' : '下架' }} </span>
        </el-form-item>
        <el-form-item label="文章方向" style="width: 100%;">
          <el-checkbox-group v-if="inEdit" v-model="edit.directions">
            <el-checkbox v-for="item in directionOptions" :key="item.id" :label="item.id" :value="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
          <span v-else> {{ form.directions.map(i => {return i.name}).join(',') }} </span>
        </el-form-item>
        <el-form-item label="出版周期">
          <el-select v-if="inEdit" v-model="edit.cycle_id">
            <el-option
              v-for="item in cycleOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <span v-else> {{ form.cycle.name }} </span>
        </el-form-item>
        <el-form-item label="刊物级别">
          <el-select v-if="inEdit" v-model="edit.level.id">
            <el-option
              v-for="item in levelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <span v-else>  {{ form.level.name }} </span>
        </el-form-item>
        <el-form-item label="数据收录" style="width: 100%;">
          <el-checkbox-group v-if="inEdit" v-model="edit.included_databases">
            <el-checkbox v-for="item in includedDatabaseOptions" :key="item.id" :label="item.id" :value="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
          <span v-else>  {{ form.included_databases.map(i => {return i.name}).join(',') }} </span>
        </el-form-item>
        <!-- <el-form-item label="出刊时间">
          <div v-if="inEdit">
            <el-date-picker
              v-model="edit.publishcation_date"
              type="month"
              placeholder="选择月"
            />
            <el-select v-if="inEdit" v-model="edit.publication_time.id">
              <el-option
                v-for="item in publicationOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <span v-else>  {{ form.publication_date_y }} - {{ form.publication_date_m }} {{ form.publication_time.name }} </span>
        </el-form-item> -->
        <el-form-item label="国内刊号" style="width: 100%;">
          <el-input v-if="inEdit" v-model="edit.domestic_number" />
          <span v-else> {{ form.domestic_number }} </span>
        </el-form-item>
        <el-form-item label="国际刊号" style="width: 100%;">
          <el-input v-if="inEdit" v-model="edit.international_number" />
          <span v-else> {{ form.international_number }} </span>
        </el-form-item>
        <el-form-item label="邮发代号">
          <el-input v-if="inEdit" v-model="edit.post_code" />
          <span v-else>  {{ form.post_code }} </span>
        </el-form-item>
        <el-form-item label="主管单位" style="width: 100%;">
          <el-input v-if="inEdit" v-model="edit.management" />
          <span v-else>  {{ form.management }} </span>
        </el-form-item>
        <el-form-item label="主办单位" style="width: 100%;">
          <el-input v-if="inEdit" v-model="edit.organizer" />
          <span v-else>  {{ form.organizer }} </span>
        </el-form-item>
        <el-form-item label="版面字符">
          <el-input v-if="inEdit" v-model="edit.char_count" />
          <span v-else> {{ form.char_count }} </span>
        </el-form-item>
        <el-form-item label="封面核心">
          <el-select v-if="inEdit" v-model="edit.cover_core">
            <el-option :key="0" label="否" :value="0" />
            <el-option :key="1" label="是" :value="1" />
          </el-select>
          <span v-else> {{ form.cover_core == 0 ? '否' : '是' }} </span>
        </el-form-item>
        <el-form-item label="影响因子">
          <el-input v-if="inEdit" v-model="edit.impact_factor" />
          <span v-else> {{ form.impact_factor }} </span>
        </el-form-item>
        <el-form-item label="页码">
          <el-input v-if="inEdit" v-model.number="edit.page" type="number" />
          <span v-else>  {{ form.page }} </span>
        </el-form-item>
        <el-form-item v-if="false" label="页数备注">
          <el-input v-if="inEdit" v-model="edit.page_remark" />
          <span v-else>  {{ form.page_remark }} </span>
        </el-form-item>
        <el-form-item label="刊物类型">
          <el-select v-if="inEdit" v-model="edit.e_number">
            <el-option :key="0" label="纸质期刊" :value="0" />
            <el-option :key="1" label="电子期刊" :value="1" />
            <el-option :key="2" label="报刊" :value="2" />
            <el-option :key="3" label="国际刊" :value="3" />
            <el-option :key="4" label="会议刊" :value="4" />
          </el-select>
          <span v-else> {{ form.e_number === 0 ? '纸质期刊' : form.e_number === 1 ? '电子期刊' : form.e_number === 2 ? '报刊' : form.e_number === 3 ? '国际刊' : form.e_number === 4 ? '会议刊' : '' }} </span>
        </el-form-item>
        <el-form-item label="开社内发票">
          <el-select v-if="inEdit" v-model="edit.invoice">
            <el-option :key="0" label="否" :value="0" />
            <el-option :key="1" label="是" :value="1" />
          </el-select>
          <span v-else>  {{ form.invoice === 0 ? '否' : '是' }} </span>
        </el-form-item>
        <el-form-item label="学术目录">
          <el-select v-if="inEdit" v-model="edit.science_periodical">
            <el-option :key="0" label="否" :value="0" />
            <el-option :key="1" label="是" :value="1" />
          </el-select>
          <span v-else>  {{ form.science_periodical }} </span>
        </el-form-item>

        <section v-show="role == '超级管理员' || role == '管理员' " class="top-btn-bar" style="margin: 20px">
          <el-button v-if="!inEdit" type="success" icon="el-icon-plus" @click="handleEdit">编辑</el-button>
          <el-button v-if="inEdit" type="primary" @click="onSubmit">保存</el-button>
          <el-button v-if="inEdit" @click="inEdit = false;loading = false">取消</el-button>
        </section>
        <H3>次要信息</H3>
        <el-form-item label="刊物栏目">
          <el-input v-if="inEdit" v-model="edit.column" />
          <span v-else> {{ form.column }} </span>
        </el-form-item>
        <el-form-item label="收稿要求">
          <el-input v-if="inEdit" v-model="edit.annex_info" />
          <span v-else> {{ form.annex_info }} </span>
        </el-form-item>
        <el-form-item v-if="false" label="是否暂停收稿">
          <el-select v-if="inEdit" v-model="edit.suspend_receiving">
            <el-option :key="0" label="否" :value="0" />
            <el-option :key="1" label="是" :value="1" />
          </el-select>
          <span v-else>  {{ form.suspend_receiving == 0 ? '否' : '是' }} </span>
        </el-form-item>
        <el-form-item label="审稿难度">
          <el-select v-if="inEdit" v-model="edit.audit_standard.id">
            <el-option
              v-for="item in auditStandardOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <span v-else> {{ form.audit_standard == null ? '' : form.audit_standard.name }} </span>
        </el-form-item>

        <section v-show="role == '超级管理员' || role == '管理员' " class="top-btn-bar" style="margin: 20px">
          <el-button v-if="!inEdit" type="success" icon="el-icon-plus" @click="handleEdit">编辑</el-button>
          <el-button v-if="inEdit" type="primary" @click="onSubmit">保存</el-button>
          <el-button v-if="inEdit" @click="inEdit = false;loading = false">取消</el-button>
        </section>
        <div v-if="false">
          <H3>其他信息</H3>

          <el-form-item label="作者信息">
            <el-input v-if="inEdit" v-model="edit.author_info" />
            <span v-else> {{ form.author_info }} </span>
          </el-form-item>

          <el-form-item label="是否可查稿">
            <el-select v-if="inEdit" v-model="edit.check_manuscript">
              <el-option :key="0" label="否" :value="0" />
              <el-option :key="1" label="是" :value="1" />
            </el-select>
            <span v-else> {{ form.check_manuscript === 0 ? '否' : '是' }} </span>
          </el-form-item>
          <el-form-item label="是否推荐">
            <el-select v-if="inEdit" v-model="edit.recommend">
              <el-option :key="0" label="否" :value="0" />
              <el-option :key="1" label="是" :value="1" />
            </el-select>
            <span v-else> {{ form.recommend === 0 ? '否' : '是' }} </span>
          </el-form-item>

          <br>

          <el-form-item label="收录年份">
            <el-date-picker
              v-if="inEdit"
              v-model="edit.included_date"
              type="year"
            />
            <span v-else>  {{ form.included_date }} </span>
          </el-form-item>

          <el-form-item label="省市邮编">
            <el-input v-if="inEdit" v-model="edit.postcode" />
            <span v-else>  {{ form.postcode }} </span>
          </el-form-item>
          <el-form-item label="参考文献">
            <el-input v-if="inEdit" v-model="edit.references" />
            <span v-else>  {{ form.references }} </span>
          </el-form-item>
          <el-form-item label="审稿时间">
            <el-input v-if="inEdit" v-model="edit.review_time" />
            <span v-else>  {{ form.review_time }} </span>
          </el-form-item>

          <el-form-item label="样刊">
            <el-input v-if="inEdit" v-model="edit.simple" />
            <span v-else>  {{ form.simple }} </span>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-if="inEdit" v-model="edit.summary_keywords" />
            <span v-else>  {{ form.summary_keywords }} </span>
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-if="inEdit" v-model="form.remark" />
            <span v-else>  {{ form.remakr }} </span>
          </el-form-item>
          <section v-show="role == '超级管理员' || role == '管理员' " class="top-btn-bar" style="margin: 20px">
            <el-button v-if="!inEdit" type="success" icon="el-icon-plus" @click="handleEdit">编辑</el-button>
            <el-button v-if="inEdit" type="primary" @click="onSubmit">保存</el-button>
            <el-button v-if="inEdit" @click="inEdit = false;loading = false">取消</el-button>
          </section>
        </div>
        <br>
        <H3>价格</H3>
        <el-form-item label="价格">
          <el-table
            v-if="inEdit"
            :data="edit.price"
            border
            highlight-current-row
          >
            <el-table-column align="center" label="角色">
              <template slot-scope="scope">{{ scope.row.role.show_title }}</template>
            </el-table-column>
            <el-table-column align="center" label="价格">
              <template slot-scope="scope"> <el-input v-model.number="scope.row.price" type="number" /></template>
            </el-table-column>
          </el-table>
          <el-table
            v-else
            :data="form.price"
            border
            highlight-current-row
          >
            <el-table-column align="center" label="角色">
              <template slot-scope="scope">{{ scope.row.role.name }}</template>
            </el-table-column>
            <el-table-column align="center" label="价格">
              <template slot-scope="scope">{{ scope.row.price }}</template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <section v-show="role == '超级管理员' || role == '管理员' " class="top-btn-bar" style="margin: 20px">
          <el-button v-if="!inEdit" type="success" icon="el-icon-plus" @click="handleEdit">编辑</el-button>
          <el-button v-if="inEdit" type="primary" @click="onSubmit">保存</el-button>
          <el-button v-if="inEdit" @click="inEdit = false;loading = false">取消</el-button>
        </section>

        <section>
          <div>
            <h3>当前刊期</h3>
            <el-button v-show="role == '超级管理员' || role == '管理员' " type="primary" style="margin: 10px;" @click="handleAddHistory">新增</el-button>
          </div>
          <el-table
            :data="history"
            border
            highlight-current-row
          >
            <el-table-column align="center" label="内容">
              <template slot-scope="scope"> <span>{{ scope.row.content }}</span></template>
            </el-table-column>
            <el-table-column align="center" label="刊期">
              <template slot-scope="scope"> <span>{{ scope.row.publish_at }} {{ scope.row.publish_at_about_name }}</span></template>
            </el-table-column>
            <el-table-column
              class-name="status-col"
              label="操作"
              width="220"
              align="center"
            >
              <template slot-scope="scope">
                <div v-show="role == '超级管理员' || role == '管理员' ">
                  <el-button size="mini" type="success" @click="handleEditHistory(scope.row)">修改
                  </el-button>
                  <el-button size="mini" type="danger" @click="handleDeleteHistory(scope.row)">删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <section class="pagination-bar">
            <el-pagination
              background
              :current-page="historyQuery.page"
              :page-sizes="[100, 50, 30, 10]"
              :page-size="historyQuery.limit"
              layout="sizes, prev, pager, next"
              :total="count"
              @size-change="(limit) => {historyQuery.limit = limit; getHistory()}"
              @current-change="(page) => {historyQuery.page = page; getHistory()}"
            />
          </section>
        </section>

        <div v-if="false" style="">
          <br>
          <h3>其他</h3>
          <el-form-item label="征稿函">
            <el-button><a :href="form.letter">下载</a></el-button>
            <el-button v-show="role == '超级管理员' || role == '管理员' " @click="handleUpdateLetter">更新</el-button>
          </el-form-item>
          <br>

        </div>
      </el-form>
    </section>

    <el-dialog title="上传" :visible.sync="updateLetterDialogVisible">
      <el-upload
        :action="this.updateUrl"
        name="file"
        :file-list="fileList"
        :data="{periodical: form.id, type: 'letter'}"
        :headers="this.updateHeader"
        :on-success="fetchData"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-dialog>
    <el-dialog title="上传" :visible.sync="updateCoverDialogVisible">
      <el-upload
        :action="this.updateUrl"
        name="file"
        :file-list="fileList"
        :data="{periodical: form.id, type: 'cover'}"
        :headers="this.updateHeader"
        :on-success="fetchData"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-dialog>
    <el-dialog style="text-align: center;" title="编辑" :visible.sync="updateEditDialogVisible">
      <el-input v-model="editTempData.content" placeholder="请填写内容" style="margin: 10px 0;width: 100%;" />
      <el-date-picker
        v-model="editTempData.publish_at"
        type="month"
        placeholder="选择日期"
        style="margin: 10px 0;width: 100%;"
      />
      <el-select v-if="inEdit" v-model="editTempData.publish_at_about" style="margin: 10px 0;width: 100%;">
        <el-option
          v-for="item in publicationOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button style="margin: 10px 0;width: 120px;" @click="updateHistory">提交</el-button>
    </el-dialog>
    <el-dialog style="text-align: center;" title="新增" :visible.sync="addEditDialogVisible">
      <el-input v-model="editTempData.content" placeholder="请填写内容" style="margin: 10px 0;width: 100%;" />
      <el-date-picker
        v-model="editTempData.publish_at"
        type="month"
        placeholder="选择日期"
        style="margin: 10px 0;width: 100%;"
      />
      <el-select v-model="editTempData.publish_at_about" style="margin: 10px 0;width: 100%;">
        <el-option
          v-for="item in publicationOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button style="margin: 10px;width: 120px;" @click="addHistory">提交</el-button>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api'
// import globalVariable from '@/api/global'
import { getToken } from '../../utils/auth'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  name: 'Detail',
  data() {
    return {
      history: '',
      count: '',
      historyQuery: {
        page: 1,
        limit: 10
      },
      inEdit: false,
      form: {
        title: ''
      },
      fileList: '',
      updateUrl: `${process.env.VUE_APP_BASE_API}/api/management/periodical/updateFile`,
      updateHeader: {
        'Authorization': 'bearer' + getToken()
      },
      edit: '',
      loading: false,
      directionOptions: '',
      cycleOptions: '',
      auditStandardOptions: '',
      levelOptions: '',
      includedDatabaseOptions: '',
      publicationOptions: '',
      updateLetterDialogVisible: false,
      updateCoverDialogVisible: false,
      updateEditDialogVisible: false,
      editTempData: '',
      addEditDialogVisible: false
    }
  },
  created() {
    this.fetchData()
    this.getOptions()
    this.getHistory()
  },
  methods: {
    fetchData() {
      api.periodical.detail(this.$route.query).then(res => {
        if (res.err_no === 0) {
          this.form = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleEdit() {
      this.edit = JSON.parse(JSON.stringify(this.form))
      this.edit.directions = this.edit.directions.map(i => { return i.id })
      this.edit.included_databases = this.edit.included_databases.map(i => { return i.id })
      this.inEdit = true
    },
    onSubmit() {
      this.loading = true
      api.periodical.updateDetail(this.edit).then(res => {
        this.loading = false
        if (res.err_no === 0) {
          location.reload()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getOptions() {
      this.getDirectionOptions()
      this.getCycleOptions()
      this.getAuditStandardOptions()
      this.getLevelOptions()
      this.getIncludedDatabaseOptions()
      this.getPublicationOptions()
    },
    getDirectionOptions() {
      api.periodical.getDirectionOptions().then(res => {
        if (res.err_no === 0) {
          this.directionOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getCycleOptions() {
      api.periodical.getCycleOptions().then(res => {
        if (res.err_no === 0) {
          this.cycleOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getAuditStandardOptions() {
      api.periodical.getAuditStandardOptions().then(res => {
        if (res.err_no === 0) {
          this.auditStandardOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getLevelOptions() {
      api.periodical.getLevelOptions().then(res => {
        if (res.err_no === 0) {
          this.levelOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getIncludedDatabaseOptions() {
      api.periodical.getIncludedDatabaseOptions().then(res => {
        if (res.err_no === 0) {
          this.includedDatabaseOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getPublicationOptions() {
      api.periodical.getPublicationOptions().then(res => {
        if (res.err_no === 0) {
          this.publicationOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleUpdateLetter() {
      this.updateLetterDialogVisible = true
    },
    handleUpdateCover() {
      this.updateCoverDialogVisible = true
    },
    handleEditHistory(row) {
      this.updateEditDialogVisible = true
      this.editTempData = row
    },
    updateHistory() {
      api.periodical.updateHistory(this.editTempData).then(res => {
        if (res.err_no === 0) {
          this.updateEditDialogVisible = false
          this.getHistory()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getHistory() {
      api.periodical.getHistory({
        id: this.$route.query.id,
        page: this.historyQuery.page,
        limit: this.historyQuery.limit
      }).then(res => {
        if (res.err_no === 0) {
          this.history = res.data.data
          this.count = res.data.count
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
        this.handleEdit()
      })
    },
    handleDeleteHistory(row) {
      this.$confirm('确定删除该记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.periodical.deleteHistory({ id: row.id }).then(res => {
          if (res.err_no === 0) {
            this.getHistory()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$notify.error({
              title: '错误',
              message: res.err_msg
            })
          }
        })
      })
    },
    handleAddHistory() {
      this.editTempData = {
        content: '',
        id: this.form.id
      }
      this.addEditDialogVisible = true
    },
    addHistory() {
      api.periodical.addHistory(this.editTempData).then(res => {
        if (res.err_no === 0) {
          this.getHistory()
          this.addEditDialogVisible = false
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .detailForm {
  .nowrapFlex {
    display: flex;
    flex-wrap: nowrap;
  }

  .el-form-item {
    width: 50%;
    display: inline-block;

  .inputNumber {
    width: 220px;
    margin-right: 20px;
  }
  }

  .allLine {
    width: 100%;
  }
  }
</style>
